<template>
	<!-- 基本工单详情 -->
	<view class="order-de">

		<detail-top :order_detail='order_detail'></detail-top>

		<!-- 工单状态 -->
		<view class="order-sc" v-if="type!=1">
			<view class="order-de-c-m" style="display: flex;align-items: center;">
				<text>{{order_detail.type_data==1?'维保进度':'工单进度'}}</text>
				<image src="../../static/a.png" mode="" style="width: 32rpx;height: 32rpx;margin-left: 10rpx;"></image>
			</view>
			<work-flow :work_flow_list='work_flow_list'></work-flow>
		</view>
	</view>
</template>

<script>
	import workFlow from '../../components/workFlow.vue' //工单流
	import changetype from '../../utils/changetype.js' //转换名字
	import detailTop from '@/components/detailTop/detailTop.vue' //顶部样式
	export default {
		components: {
			detailTop,
			workFlow
		},
		data() {
			return {
				warranty_id: null, //工单流id
				work_flow_list: [], //工单流
				id: null, //工单id
				user_name: '', //该订单执行者
				order_detail: {}, //订单详情
				show: false, //
				animationData: {},
				type: 0, //1首页进来工单详情   2维保详情   3报修工单详情
				page: 1,
				last_page: 1
			}
		},
		onLoad(e) {
			this.id = e.id
			this.warranty_id = e.warranty_id
			this.getNewsDetail()
			this.getFlow()
		},
		methods: {
			/* 最新工单详情 */
			getNewsDetail() {
				this.$https.post('/warranty/details', {
					warranty_id: this.id
				}).then(res => {
					this.order_detail = res.data
					this.order_detail.type_data = changetype(res.data.type_data)
					if (this.order_detail.images) { //存在照片
					
						let images = this.order_detail.images.split(',') //字符串转数组  获取照片
						this.order_detail.imgs = []
						images.forEach(item3 => {
							this.order_detail.imgs.push(item3)
						})
					
					}
				})
			},
			/* 获取工单流 */
			getFlow() {
				this.$https.post('/warranty/workflow', {
					warranty_id: this.warranty_id,
					page: this.page
				}).then(res2 => {
					this.last_page = res2.data.last_page
					this.work_flow_list = this.work_flow_list.concat(res2.data.data)
					this.work_flow_list.forEach(item => {
						if (item.images) { //存在图片 转换 
							item.multiMedia = {
								imgs: [],
								video: ''
							}
							let images = item.images.split(',') //字符串转数组  获取照片和视频
							images.forEach(item2 => {
								if (item2 != '') {
									if (this.judgmentFile(item2)) {
										item.multiMedia.video = item2 //视频
									} else {

										item.multiMedia.imgs.push(item2) //图片
									}
								}

							})
						}
					})

				})
			},
			/* 判断是否为视频文件 */
			judgmentFile(picUrl) {

				let filename = picUrl; //文件路径地址
				let index1 = filename.lastIndexOf(".");
				let index2 = filename.length;
				let postf = filename.substring(index1, index2); //获取文bai件后缀名duzhi
				//判断文件后缀名是否等于视频文件的后缀名
				if (postf === ".avi" || postf === ".mp4" || postf === ".rmvb") {
					return true
				} else {
					return false
				}
			},
			/* 电话 */
			numPhone() {
				/* wx.makePhoneCall({
					phoneNumber:""
				}) */
			},
			/* 申请结单 查看 */
			placeJiedan(id,report_id) {
				/* warranty_id	-
				 工单id
				 service_id	-	
				 维修id
				 */
				uni.navigateTo({
					url: '../jiedan/jiedan?warranty_id=' + this.order_detail.warranty_id + "&service_id=" + id+"&report_id="+report_id
				})
				/* 	uni.navigateTo({
					url: '../jiedan/jiedan?warranty_id=' + this.order_detail.warranty_id + "&service_id=" + this
						.order_detail.service.id
				}) */
			}
		},
		onReachBottom() {
			if (this.last_page != this.page) {
				this.page = this.page + 1
				this.getFlow()
			}
		}
	}
</script>

<style lang='scss' scoped>
	.rightSee {
		position: fixed;
		left: 75rpx;
		bottom: 10rpx;
		width: 600rpx;
		margin: auto;
		height: 80rpx;
		background: #257EFA;
		border-radius: 48rpx;
		opacity: 1;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

	.getmore-enter-active {
		transition: trans;
	}

	.getmore-enter {
		opacity: 0;
	}

	.getmore-leave-active {
		transition: opacity 3s;
	}

	.getmore-leave-to {
		opacity: 0;
	}


	.order-de-mo {
		border-top: 16rpx solid #f7f8fb;
		position: relative;
		z-index: -9999;

		&-s {
			position: absolute;
			top: -16rpx;
			left: 40rpx;
			border-left: 20rpx solid transparent;
			border-right: 20rpx solid transparent;
			border-top: 20rpx solid $public-oclor;
		}
	}

	.order-de {
		&-c {
			background-color: #f7f8fb;
			border-bottom: 28rpx solid #f7f8fb;

			&-m {
				font-size: 28rpx;
				font-weight: 400;
				color: #969699;
				line-height: 33rpx;
				padding: 28rpx 32rpx;

			}

			&-c {
				background-color: #FFFFFF;

				&-f {
					display: flex;
					justify-content: space-between;
					padding: 28rpx 32rpx;
					align-items: center;
					border-bottom: 2rpx solid #f7f8fb;

					&-l {
						font-size: 28rpx;
						font-weight: 500;
						color: #3B3D3D;
					}

					&-r {
						font-size: 24rpx;
						font-weight: 400;
						color: #3B3D3D;
					}
				}
			}
		}


		&-x {
			padding: 0 32rpx;

			&-c {
				&-a {
					font-size: 28rpx;
					font-weight: 500;
					color: #3B3D3D;
					margin: 20rpx 0 28rpx;
				}

				&-b {
					font-size: 24rpx;
					font-weight: 400;
					color: #3B3D3D;
					margin-bottom: 32rpx;
				}

				&-c {
					padding-bottom: 42rpx;

					&-i {
						width: 160rpx;
						height: 160rpx;
						background-color: #f5f6f8;
						margin-right: 16rpx;
						display: inline-block;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.or-hi {
		width: 6rpx;
		height: 100%;
		position: absolute;
		top: 10rpx;
		left: -25rpx;
		background: #C6C7CB;
	}

	.or-hi::before {
		content: '';
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: -5rpx;
		left: -8rpx;
		border-radius: 50%;
		background-color: #C6C7CB;
	}




	@keyframes enter {
		from {
			transform: translateY(-308rpx);
		}

		to {
			transform: translateY(0rpx);
		}
	}

	@keyframes leave {
		from {
			transform: translateY(308rpx);
		}

		to {
			transform: translateY(0rpx);
		}
	}

	.ani-enter {

		animation: enter .5s;
	}

	.ani-leave {
		animation: leave .5s;
	}
</style>
